import React, { useState, useEffect, useRef } from 'react';
import { Table, Spin, message, Input, Button, Modal, Checkbox, Form, InputNumber, Select, Drawer, Space, Tooltip, Popconfirm } from 'antd';
import axios from 'axios';
import { API_BASE_URL } from '../config';
import { LeftOutlined, RightOutlined, PlusOutlined, UploadOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';

// 产品参数组件样式
const productParameterStyles = `
  .parameter-list-container {
    height: 100%;
    background-color: #fff;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  }
  
  .data-table {
    width: 100%;
  }
  
  .table-row-normal-height td {
    padding: 16px 8px;
  }
  
  .table-row-compact-height td {
    padding: 8px;
  }
  
  .compact-table .ant-table-thead > tr > th {
    padding: 8px;
  }
  
  .pagination-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-top: 1px solid #e8e8e8;
    background: #fff;
  }
  
  .table-header-actions {
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .action-buttons {
    display: flex;
    gap: 8px;
  }
  
  @media (max-width: 576px) {
    .parameter-list-container {
      margin: 0;
      border-radius: 0;
    }
  }
`;

// 产品参数组件
const ProductParameter = ({ productId }) => {
  const [loading, setLoading] = useState(false);
  const [parameterList, setParameterList] = useState([]);
  const [allParameters, setAllParameters] = useState([]);
  const [pagination, setPagination] = useState({
    current: 1,
    pageSize: 10,
    total: 0
  });
  const [isMobile, setIsMobile] = useState(false);
  const [currentPage, setCurrentPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const inputRef = useRef(null);
  
  // 添加参数相关状态
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [systemParameters, setSystemParameters] = useState([]);
  const [selectedParameters, setSelectedParameters] = useState([]);
  const [parameterValues, setParameterValues] = useState({});
  const [parameterModalLoading, setParameterModalLoading] = useState(false);
  const [productDetail, setProductDetail] = useState(null);

  // 手动添加相关状态
  const [manualAddVisible, setManualAddVisible] = useState(false);
  const [manualAddForm] = Form.useForm();
  const [productCategories, setProductCategories] = useState([]);
  const [manualAddLoading, setManualAddLoading] = useState(false);

  // 编辑参数相关状态
  const [editModalVisible, setEditModalVisible] = useState(false);
  const [editForm] = Form.useForm();
  const [currentParameter, setCurrentParameter] = useState(null);
  const [editLoading, setEditLoading] = useState(false);

  // 检测是否为移动设备
  useEffect(() => {
    const checkIsMobile = () => {
      setIsMobile(window.innerWidth <= 576);
    };
    
    checkIsMobile();
    window.addEventListener('resize', checkIsMobile);
    
    return () => {
      window.removeEventListener('resize', checkIsMobile);
    };
  }, []);

  // 获取产品参数列表
  useEffect(() => {
    fetchProductParameters();
  }, [productId]);

  // 获取产品分类列表
  const fetchProductCategories = async () => {
    try {
      const response = await axios.get(`${API_BASE_URL}/api/product_category`);
      if (response.data && response.data.code === 200) {
        const categories = response.data.data.items || [];
        setProductCategories(categories);
        console.log('获取到的产品分类列表:', categories);
      } else {
        console.error('获取产品分类列表失败:', response.data);
      }
    } catch (error) {
      console.error('获取产品分类出错:', error);
    }
  };

  // 获取产品参数列表方法
  const fetchProductParameters = async () => {
    if (!productId) return;
    
    setLoading(true);
    try {
      // 首先获取产品详情以确认产品ID和当前版本
      const productResponse = await axios.get(`${API_BASE_URL}/api/product_info/${productId}`);
      
      if (productResponse.data && productResponse.data.code === 200) {
        const productData = productResponse.data.data;
        console.log('产品详情数据:', productData);
        console.log('产品ID:', productId, '类型:', typeof productId);
        console.log('产品当前版本:', productData.current_version);
        
        // 保存产品详情数据，用于后续获取版本信息
        setProductDetail(productData);
        
        // 获取产品版本列表
        const versionResponse = await axios.get(`${API_BASE_URL}/api/product_version`, {
          params: {
            page: 1,
            size: 100 // 获取更多版本以确保包含所有版本
          }
        });
        
        let versionId = null;
        if (versionResponse.data && versionResponse.data.code === 200) {
          const versionItems = versionResponse.data.data.items || [];
          console.log('获取到的产品版本列表:', versionItems);
          
          // 找到当前产品的版本
          const productVersions = versionItems.filter(v => v.product_id === Number(productId));
          console.log('当前产品的所有版本:', productVersions);
          
          if (productVersions.length > 0 && productData.current_version) {
            // 首先尝试通过版本号匹配
            let currentVersion = productVersions.find(v => v.version === productData.current_version);
            console.log('通过版本号匹配结果:', currentVersion);
            
            // 如果没有找到匹配的版本，则尝试其他方法
            if (!currentVersion) {
              // 尝试找到标记为当前版本的记录
              currentVersion = productVersions.find(v => v.is_current === true);
              console.log('通过is_current匹配结果:', currentVersion);
              
              // 如果仍然没有找到，则取最新创建的版本作为当前版本
              if (!currentVersion) {
                // 按创建时间排序，最新的在前面
                productVersions.sort((a, b) => {
                  const dateA = new Date(a.create_time || 0);
                  const dateB = new Date(b.create_time || 0);
                  return dateB - dateA;
                });
                currentVersion = productVersions[0];
                console.log('使用最新创建的版本作为当前版本:', currentVersion);
              }
            }
            
            if (currentVersion) {
              versionId = currentVersion.id;
              console.log('找到当前产品版本ID:', versionId);
            }
          }
        }
        
        // 然后获取该产品的参数列表，带上版本ID参数
        const params = {
          product_id: Number(productId)
        };
        
        if (versionId) {
          params.version_id = versionId;
        }
        
        console.log('查询参数列表使用的参数:', params);
        
        // 实现获取所有参数数据的逻辑
        let allItems = [];
        let currentPage = 1;
        let hasMoreData = true;
        
        // 循环获取所有页的数据
        while (hasMoreData) {
          const pageParams = {
            ...params,
            page: currentPage,
            size: 100 // 每页获取100条
          };
          
          console.log(`获取第${currentPage}页参数数据，参数:`, pageParams);
          
          try {
            const pageResponse = await axios.get(`${API_BASE_URL}/api/product_parameter`, {
              params: pageParams
            });
            
            if (pageResponse.data && pageResponse.data.code === 200) {
              const pageItems = pageResponse.data.data.items || [];
              const total = pageResponse.data.data.total || 0;
              
              console.log(`第${currentPage}页获取到${pageItems.length}条数据，总数据量:${total}`);
              
              // 添加到总数据中
              allItems = [...allItems, ...pageItems];
              
              // 判断是否还有更多数据
              if (pageItems.length < 100 || allItems.length >= total) {
                hasMoreData = false;
              } else {
                currentPage++;
              }
            } else {
              console.error('获取参数数据失败:', pageResponse.data);
              hasMoreData = false;
            }
          } catch (error) {
            console.error(`获取第${currentPage}页数据出错:`, error);
            hasMoreData = false;
          }
        }
        
        console.log('获取到的所有参数数据:', allItems.length);
        
          // 过滤出当前产品的参数
        const currentProductParams = allItems.filter(item => Number(item.product_id) === Number(productId));
        console.log('过滤后的产品参数:', currentProductParams);
        
        // 如果没有找到参数，尝试不带版本ID再查询一次
        if (currentProductParams.length === 0 && versionId) {
          console.log('没有找到参数，尝试不带版本ID再查询一次');
          
          // 重置变量
          allItems = [];
          currentPage = 1;
          hasMoreData = true;
          
          // 不带版本ID的查询参数
          const fallbackBaseParams = {
            product_id: Number(productId)
          };
          
          // 循环获取所有页的数据
          while (hasMoreData) {
            const fallbackPageParams = {
              ...fallbackBaseParams,
              page: currentPage,
              size: 100 // 每页获取100条
            };
            
            console.log(`不带版本ID查询，获取第${currentPage}页参数数据，参数:`, fallbackPageParams);
            
            try {
              const fallbackPageResponse = await axios.get(`${API_BASE_URL}/api/product_parameter`, {
                params: fallbackPageParams
              });
              
              if (fallbackPageResponse.data && fallbackPageResponse.data.code === 200) {
                const fallbackPageItems = fallbackPageResponse.data.data.items || [];
                const fallbackTotal = fallbackPageResponse.data.data.total || 0;
                
                console.log(`不带版本ID查询，第${currentPage}页获取到${fallbackPageItems.length}条数据，总数据量:${fallbackTotal}`);
                
                // 添加到总数据中
                allItems = [...allItems, ...fallbackPageItems];
                
                // 判断是否还有更多数据
                if (fallbackPageItems.length < 100 || allItems.length >= fallbackTotal) {
                  hasMoreData = false;
                } else {
                  currentPage++;
                }
              } else {
                console.error('不带版本ID查询，获取参数数据失败:', fallbackPageResponse.data);
                hasMoreData = false;
              }
            } catch (error) {
              console.error(`不带版本ID查询，获取第${currentPage}页数据出错:`, error);
              hasMoreData = false;
            }
          }
          
          console.log('不带版本ID查询，获取到的所有参数数据:', allItems.length);
          
          // 过滤出当前产品的参数
          const fallbackParams = allItems.filter(item => Number(item.product_id) === Number(productId));
          console.log('不带版本ID查询，过滤后的产品参数:', fallbackParams);
          
          if (fallbackParams.length > 0) {
            setAllParameters(fallbackParams);
            
            // 计算总数
            const total = fallbackParams.length;
            setPagination({
              ...pagination,
              total: total
            });
            
            // 手动实现分页
            updatePageData(fallbackParams, currentPage);
            setLoading(false);
            return;
          }
        }
        
        if (currentProductParams.length > 0) {
          setAllParameters(currentProductParams);
          
          // 计算总数
          const total = currentProductParams.length;
          setPagination({
            ...pagination,
            total: total
          });
          
          // 手动实现分页
          updatePageData(currentProductParams, 1); // 重置为第一页
        } else {
          // 如果仍然没有找到参数，设置为空数组
          setAllParameters([]);
          setPagination({
            ...pagination,
            total: 0
          });
          setParameterList([]);
        }
      } else {
        message.error('获取产品详情失败: ' + (productResponse.data.message || '未知错误'));
      }
    } catch (error) {
      console.error('获取产品数据错误:', error);
      message.error('获取产品数据失败: ' + (error.message || '网络错误'));
    } finally {
      setLoading(false);
    }
  };

  // 更新当前页数据
  useEffect(() => {
    if (allParameters.length > 0) {
      updatePageData(allParameters, currentPage);
    }
  }, [currentPage, pageSize, allParameters]);

  // 手动分页处理
  const updatePageData = (data, page) => {
    const startIndex = (page - 1) * pageSize;
    const endIndex = startIndex + pageSize;
    const currentPageData = data.slice(startIndex, endIndex);
    setParameterList(currentPageData);
  };

  // 处理页码变化
  const handlePageChange = (page) => {
    setCurrentPage(page);
  };

  // 处理页码输入
  const handlePageInputChange = (e) => {
    const value = parseInt(e.target.value, 10);
    if (!isNaN(value) && value > 0 && value <= Math.ceil(pagination.total / pageSize)) {
      setCurrentPage(value);
    }
  };

  // 处理页码输入框按键事件
  const handlePageInputKeyPress = (e) => {
    if (e.key === 'Enter') {
      const value = parseInt(e.target.value, 10);
      if (!isNaN(value) && value > 0 && value <= Math.ceil(pagination.total / pageSize)) {
        setCurrentPage(value);
      }
    }
  };

  // 前一页
  const goPrevPage = () => {
    if (currentPage > 1) {
      setCurrentPage(currentPage - 1);
    }
  };

  // 后一页
  const goNextPage = () => {
    if (currentPage < Math.ceil(pagination.total / pageSize)) {
      setCurrentPage(currentPage + 1);
    }
  };

  // 格式化日期
  const formatDate = (dateString) => {
    if (!dateString) return '-';
    
    try {
      const date = new Date(dateString);
      return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
        hour12: false
      });
    } catch (e) {
      return dateString;
    }
  };

  // 获取表格列定义
  const getColumns = () => {
    const baseColumns = [
      {
        title: '参数名称',
        dataIndex: 'param_name',
        key: 'param_name',
        align: 'left',
        ellipsis: true,
        render: (text) => <span>{text || '-'}</span>
      },
      {
        title: '参数值',
        dataIndex: 'param_value',
        key: 'param_value',
        align: 'center',
        ellipsis: true,
        render: (text) => <span>{text || '-'}</span>
      },
      {
        title: '参数单位',
        dataIndex: 'param_unit',
        key: 'param_unit',
        align: 'center',
        ellipsis: true,
        render: (text) => <span>{text || '-'}</span>
      },
      {
        title: '参数类型',
        dataIndex: 'param_type',
        key: 'param_type',
        align: 'center',
        ellipsis: true,
        render: (text) => <span>{text || '-'}</span>
      },
      {
        title: '创建时间',
        dataIndex: 'create_time',
        key: 'create_time',
        align: 'center',
        ellipsis: true,
        render: (text) => <span>{formatDate(text)}</span>
      },
      {
        title: '更新时间',
        dataIndex: 'update_time',
        key: 'update_time',
        align: 'center',
        ellipsis: true,
        render: (text) => <span>{formatDate(text)}</span>
      },
      {
        title: '操作',
        key: 'action',
        align: 'center',
        width: 120,
        render: (_, record) => (
          <Space size="small">
            <Tooltip title="编辑参数">
              <Button 
                type="text" 
                icon={<EditOutlined />} 
                onClick={() => showEditModal(record)}
              />
            </Tooltip>
            <Tooltip title="删除参数">
              <Popconfirm
                title="确定要删除此参数吗?"
                onConfirm={() => handleDeleteParameter(record.id)}
                okText="是"
                cancelText="否"
              >
                <Button type="text" danger icon={<DeleteOutlined />} />
              </Popconfirm>
            </Tooltip>
          </Space>
        ),
      }
    ];
    
    // 移动端只显示核心列
    if (isMobile) {
      return baseColumns.filter(column => 
        ['param_name', 'param_value', 'param_unit', 'action'].includes(column.key)
      );
    }
    
    return baseColumns;
  };

  // 获取行样式
  const getRowClassName = () => {
    if (parameterList.length >= 10 || isMobile) {
      return "table-row-compact-height";
    }
    return "table-row-normal-height";
  };

  // 显示添加参数模态框
  const showAddParameterModal = async () => {
    setParameterModalLoading(true);
    setIsModalVisible(true);
    setModalCurrentPage(1); // 重置为第一页
    
    // 预先获取产品版本信息，确保有正确的版本ID
    try {
      console.log('预先获取产品版本信息...');
      const versionResponse = await axios.get(`${API_BASE_URL}/api/product_version`, {
        params: {
          page: 1,
          size: 100
        }
      });
      
      if (versionResponse.data && versionResponse.data.code === 200) {
        const versionItems = versionResponse.data.data.items || [];
        // 找到当前产品的版本
        const productVersions = versionItems.filter(v => v.product_id === Number(productId));
        console.log('预先获取的当前产品的所有版本:', productVersions);
        
        if (productVersions.length > 0) {
          // 记录版本信息，方便后续使用
          console.log(`产品ID ${productId} 有 ${productVersions.length} 个版本`);
        } else {
          console.warn(`产品ID ${productId} 没有找到任何版本信息`);
        }
      }
    } catch (error) {
      console.error('预先获取产品版本信息出错:', error);
    }
    
    try {
      // 获取系统中所有产品参数
      const response = await axios.get(`${API_BASE_URL}/api/product_parameter`, {
        params: {
          page: 1,
          size: 100
        }
      });
      
      if (response.data && response.data.code === 200) {
        console.log('系统产品参数:', response.data.data);
        
        // 检查第一个参数的结构，找出所有字段
        const allParams = response.data.data.items || [];
        if (allParams.length > 0) {
          console.log('参数示例结构:', allParams[0]);
          const fieldNames = Object.keys(allParams[0]);
          console.log('参数字段列表:', fieldNames);
        }
        
        // 提取唯一参数模板
        const uniqueParams = [];
        const paramNameSet = new Set();
        
        allParams.forEach(param => {
          if (!paramNameSet.has(param.param_name)) {
            paramNameSet.add(param.param_name);
            uniqueParams.push(param);
          }
        });
        
        // 过滤出当前产品还没有的参数
        const existingParamNames = allParameters.map(param => param.param_name);
        const filteredParams = uniqueParams.filter(param => 
          !existingParamNames.includes(param.param_name)
        );
        
        console.log('可用的唯一参数:', filteredParams);
        setSystemParameters(filteredParams);
        
        // 更新模态框分页数据，显示第一页
        updateModalPageData(filteredParams, 1);
      } else {
        message.error('获取系统参数列表失败: ' + (response.data?.message || '未知错误'));
      }
    } catch (error) {
      console.error('获取系统参数列表错误:', error);
      console.log('错误详情:', error.response?.data);
      message.error('获取系统参数列表失败: ' + (error.response?.data?.message || error.message || '网络错误'));
    } finally {
      setParameterModalLoading(false);
    }
  };

  // 处理参数选择变化
  const handleParameterSelectChange = (paramId, checked) => {
    if (checked) {
      setSelectedParameters([...selectedParameters, paramId]);
      
      // 初始化参数值
      const param = systemParameters.find(p => p.id === paramId);
      if (param) {
        setParameterValues({
          ...parameterValues,
          [paramId]: {
            param_name: param.param_name || '',
            param_value: param.param_value || '',
            param_unit: param.param_unit || '',
            param_type: param.param_type || 'string'
          }
        });
      }
    } else {
      setSelectedParameters(selectedParameters.filter(id => id !== paramId));
      
      // 移除参数值
      const newValues = { ...parameterValues };
      delete newValues[paramId];
      setParameterValues(newValues);
    }
  };

  // 处理参数值变化
  const handleParameterValueChange = (paramId, field, value) => {
    setParameterValues({
      ...parameterValues,
      [paramId]: {
        ...parameterValues[paramId],
        [field]: value
      }
    });
  };

  // 添加参数到产品
  const handleAddParameters = async () => {
    if (selectedParameters.length === 0) {
      message.warning('请至少选择一个参数');
      return;
    }

    setParameterModalLoading(true);
    
    try {
      // 获取产品当前版本的ID
      let versionId = null; // 初始值为null
      
      // 调用接口获取产品详情，获取当前版本
      try {
        console.log('获取产品详情...');
        console.log('当前产品ID:', productId);
        const productDetailResponse = await axios.get(`${API_BASE_URL}/api/product_info/${productId}`);
        
        if (productDetailResponse.data && productDetailResponse.data.code === 200) {
          const productDetailData = productDetailResponse.data.data;
          console.log('产品详情数据:', productDetailData);
          
          // 获取当前版本号
          const currentVersionNumber = productDetailData.current_version;
          console.log('产品当前版本号:', currentVersionNumber);
          
          if (currentVersionNumber) {
            // 获取产品版本列表
            const versionResponse = await axios.get(`${API_BASE_URL}/api/product_version`, {
              params: {
                page: 1,
                size: 100
              }
            });
            
            if (versionResponse.data && versionResponse.data.code === 200) {
              const versionItems = versionResponse.data.data.items || [];
              console.log('获取到的产品版本列表:', versionItems);
              
              // 找到当前产品的版本
              const productVersions = versionItems.filter(v => v.product_id === Number(productId));
              console.log('当前产品的所有版本:', productVersions);
              
              if (productVersions.length > 0) {
                // 通过版本号匹配
                let currentVersion = productVersions.find(v => v.version === currentVersionNumber);
                console.log('通过版本号匹配结果:', currentVersion);
                
                // 如果没有找到匹配的版本，则尝试其他方法
                if (!currentVersion) {
                  // 尝试找到标记为当前版本的记录
                  currentVersion = productVersions.find(v => v.is_current === true);
                  console.log('通过is_current匹配结果:', currentVersion);
                  
                  // 如果仍然没有找到，则取最新创建的版本作为当前版本
                  if (!currentVersion) {
                    // 按创建时间排序，最新的在前面
                    productVersions.sort((a, b) => {
                      const dateA = new Date(a.create_time || 0);
                      const dateB = new Date(b.create_time || 0);
                      return dateB - dateA;
                    });
                    currentVersion = productVersions[0];
                    console.log('使用最新创建的版本作为当前版本:', currentVersion);
                  }
                }
                
                if (currentVersion) {
                  versionId = currentVersion.id;
                  console.log('找到当前产品版本ID:', versionId);
                }
              }
            } else {
              console.error('获取产品版本列表失败:', versionResponse.data);
            }
          }
        } else {
          console.error('获取产品详情失败:', productDetailResponse.data);
        }
      } catch (detailError) {
        console.error('获取产品详情出错:', detailError);
      }
      
      // 如果没有找到版本ID，使用默认值
      if (versionId === null) {
        console.warn('未能获取版本ID，尝试在参数中查找');
        // 尝试从参数中找到该产品的版本ID
        if (allParameters.length > 0) {
          const sameProductParams = allParameters.filter(p => p.product_id === Number(productId));
          if (sameProductParams.length > 0) {
            versionId = sameProductParams[0].version_id;
            console.log('从现有参数中找到版本ID:', versionId);
          }
        }
      }
      
      // 如果仍然没有找到版本ID，显示错误
      if (versionId === null) {
        message.error('无法获取产品版本信息，请确认产品已创建版本');
        setParameterModalLoading(false);
        return;
      }
      
      // 为每个选中的参数创建产品参数
      const createPromises = selectedParameters.map(paramId => {
        const param = systemParameters.find(p => p.id === paramId);
        const paramValues = parameterValues[paramId] || {};

        // 构建符合接口要求的请求体，包含必填的version_id字段
        const requestData = {
          product_id: Number(productId),
          version_id: versionId, // 使用找到的版本ID
          param_name: paramValues.param_name || param.param_name || '',
          param_value: paramValues.param_value || param.param_value || '',
          param_unit: paramValues.param_unit || param.param_unit || ''
        };

        // 仅当有这些字段时才添加，避免发送undefined或null
        if (param.param_type) {
          requestData.param_type = paramValues.param_type || param.param_type;
        }
        
        console.log('创建参数请求数据:', requestData);
        
        return axios.post(`${API_BASE_URL}/api/product_parameter`, requestData, {
          headers: {
            'Content-Type': 'application/json'
          }
        })
        .catch(error => {
          console.error('参数创建失败:', error);
          console.log('请求数据:', requestData);
          
          if (error.response?.data?.detail) {
            console.error('详细错误信息:', JSON.stringify(error.response.data.detail));
          }
          
          // 尝试获取详细的验证错误信息
          let errorDetail = '';
          if (Array.isArray(error.response?.data?.detail)) {
            errorDetail = error.response.data.detail.map(item => 
              `${item.loc?.join('.')}:${item.msg}`
            ).join('; ');
          }
          
          return { 
            error: true, 
            data: error.response?.data,
            originalParam: param,
            requestData: requestData,
            errorDetail: errorDetail
          };
        });
      });
      
      const results = await Promise.all(createPromises);
      
      // 检查是否有失败的请求
      const failedResults = results.filter(res => res.error || !res.data || res.data.code !== 201);
      
      if (failedResults.length > 0) {
        console.error('部分参数添加失败:', failedResults);
        message.warning(`${failedResults.length}个参数添加失败，请检查参数格式`);
        
        // 显示详细的错误信息
        if (failedResults[0].errorDetail) {
          message.error(`错误详情: ${failedResults[0].errorDetail}`);
        } else if (failedResults[0]?.data?.detail) {
          const detailStr = JSON.stringify(failedResults[0].data.detail);
          message.error(`错误详情: ${detailStr}`);
        }
        
        // 分析错误，尝试使用不同格式再次添加
        const failedParamIds = failedResults.map(res => {
          return res.originalParam?.id;
        }).filter(id => id);
        
        if (failedParamIds.length > 0) {
          console.log('尝试使用不同格式添加失败的参数');
          // 再次尝试添加这些参数，使用不同的请求格式
          await retryAddParameters(failedParamIds, failedResults[0]?.errorDetail, versionId);
        }
      } else {
        message.success('参数添加成功');
        setIsModalVisible(false);
        setSelectedParameters([]);
        setParameterValues({});
        
        // 重新获取产品参数列表
        await fetchProductParameters();
      }
    } catch (error) {
      console.error('添加产品参数错误:', error);
      if (error.response?.data?.detail) {
        console.error('详细错误信息:', JSON.stringify(error.response.data.detail));
        message.error(`错误详情: ${JSON.stringify(error.response.data.detail)}`);
      } else {
        message.error('添加产品参数失败: ' + (error.response?.data?.message || error.message || '未知错误'));
      }
    } finally {
      setParameterModalLoading(false);
    }
  };

  // 使用不同格式再次尝试添加参数
  const retryAddParameters = async (failedParamIds, errorHint, versionId) => {
    if (!failedParamIds || failedParamIds.length === 0) return;
    
    try {
                // 再次尝试获取当前版本ID，以防之前的获取失败
          let currentVersionId = versionId;
          
          // 如果没有有效的版本ID，重新尝试获取
          if (!currentVersionId || currentVersionId <= 0) {
            try {
              console.log('重新获取产品版本列表...');
              const versionResponse = await axios.get(`${API_BASE_URL}/api/product_version`, {
                params: {
                  page: 1,
                  size: 100
                }
              });
              
              if (versionResponse.data && versionResponse.data.code === 200) {
                const versionItems = versionResponse.data.data.items || [];
                
                // 找到当前产品的版本
                const productVersions = versionItems.filter(v => v.product_id === Number(productId));
                console.log('重试时当前产品的所有版本:', productVersions);
                
                // 尝试找到标记为当前版本的记录
                let currentVersion = productVersions.find(v => v.is_current === true);
                
                // 如果没有找到标记为当前的版本，则取最新创建的版本作为当前版本
                if (!currentVersion && productVersions.length > 0) {
                  // 按创建时间排序，最新的在前面
                  productVersions.sort((a, b) => {
                    const dateA = new Date(a.create_time || 0);
                    const dateB = new Date(b.create_time || 0);
                    return dateB - dateA;
                  });
                  currentVersion = productVersions[0];
                  console.log('重试时使用最新创建的版本作为当前版本:', currentVersion);
                }
                
                if (currentVersion) {
                  currentVersionId = currentVersion.id;
                  console.log('重试时找到当前产品版本ID:', currentVersionId);
                }
              }
            } catch (versionError) {
              console.error('重试时获取产品版本出错:', versionError);
            }
          }
      
      // 尝试使用不同的格式添加参数
      const createPromises = failedParamIds.map(paramId => {
        const param = systemParameters.find(p => p.id === paramId);
        const paramValues = parameterValues[paramId] || {};
        
        // 根据错误提示选择不同的请求格式，但都确保包含version_id
        let requestData = {
          product_id: Number(productId),
          version_id: currentVersionId || 1, // 确保包含版本ID
          param_name: paramValues.param_name || param.param_name || '',
          param_value: paramValues.param_value || param.param_value || '',
          param_unit: paramValues.param_unit || param.param_unit || ''
        };
        
        if (param.param_type) {
          requestData.param_type = paramValues.param_type || param.param_type;
        }
        
        console.log('重试参数请求数据:', requestData);
        
        return axios.post(`${API_BASE_URL}/api/product_parameter`, requestData)
          .catch(() => ({ error: true }));
      });
      
      const results = await Promise.all(createPromises);
      
      // 检查是否有成功的请求
      const successResults = results.filter(res => !res.error && res.data && res.data.code === 201);
      
      if (successResults.length > 0) {
        message.success(`重试成功添加 ${successResults.length} 个参数`);
        
        // 重新获取产品参数列表
        await fetchProductParameters();
      }
    } catch (error) {
      console.error('重试添加参数错误:', error);
    }
  };

  // 关闭模态框
  const handleModalCancel = () => {
    setIsModalVisible(false);
    setSelectedParameters([]);
    setParameterValues({});
  };

  // 渲染模态框表格列
  const getParameterModalColumns = () => {
    return [
      {
        title: '选择',
        dataIndex: 'id',
        key: 'select',
        width: 60,
        render: (id, record) => (
          <Checkbox
            checked={selectedParameters.includes(record.id)}
            onChange={(e) => handleParameterSelectChange(record.id, e.target.checked)}
          />
        )
      },
      {
        title: '参数名称',
        dataIndex: 'param_name',
        key: 'param_name',
        render: (text) => text || '-'
      },
      {
        title: '参数值',
        dataIndex: 'id',
        key: 'param_value',
        render: (id, record) => {
          const isSelected = selectedParameters.includes(id);
          const defaultValue = record.param_value || '';
          const value = (parameterValues[id]?.param_value !== undefined) 
            ? parameterValues[id].param_value 
            : defaultValue;
            
          return isSelected ? (
            <Input 
              value={value}
              onChange={(e) => handleParameterValueChange(id, 'param_value', e.target.value)}
              placeholder="参数值"
            />
          ) : (
            defaultValue || '-'
          );
        }
      },
      {
        title: '参数单位',
        dataIndex: 'id',
        key: 'param_unit',
        render: (id, record) => {
          const isSelected = selectedParameters.includes(id);
          const defaultUnit = record.param_unit || '';
          const unit = (parameterValues[id]?.param_unit !== undefined)
            ? parameterValues[id].param_unit
            : defaultUnit;
            
          return isSelected ? (
            <Input 
              value={unit}
              onChange={(e) => handleParameterValueChange(id, 'param_unit', e.target.value)}
              placeholder="参数单位"
            />
          ) : (
            defaultUnit || '-'
          );
        }
      },
      {
        title: '参数类型',
        dataIndex: 'param_type',
        key: 'param_type',
        render: (text) => text || '字符串'
      }
    ];
  };

  // 模态框分页相关状态
  const [modalCurrentPage, setModalCurrentPage] = useState(1);
  const [modalPageSize, setModalPageSize] = useState(10);
  const [modalParameters, setModalParameters] = useState([]);
  const modalInputRef = useRef(null);
  
  // 更新模态框当前页数据
  const updateModalPageData = (data, page) => {
    if (!data || data.length === 0) return;
    const startIndex = (page - 1) * modalPageSize;
    const endIndex = startIndex + modalPageSize;
    const currentPageData = data.slice(startIndex, endIndex);
    setModalParameters(currentPageData);
  };
  
  // 处理模态框页码变化
  const handleModalPageChange = (page) => {
    setModalCurrentPage(page);
  };
  
  // 处理模态框页码输入
  const handleModalPageInputChange = (e) => {
    const value = parseInt(e.target.value, 10);
    if (!isNaN(value) && value > 0 && value <= Math.ceil(systemParameters.length / modalPageSize)) {
      setModalCurrentPage(value);
    }
  };
  
  // 处理模态框页码输入框按键事件
  const handleModalPageInputKeyPress = (e) => {
    if (e.key === 'Enter') {
      const value = parseInt(e.target.value, 10);
      if (!isNaN(value) && value > 0 && value <= Math.ceil(systemParameters.length / modalPageSize)) {
        setModalCurrentPage(value);
      }
    }
  };
  
  // 模态框前一页
  const goModalPrevPage = () => {
    if (modalCurrentPage > 1) {
      setModalCurrentPage(modalCurrentPage - 1);
    }
  };
  
  // 模态框后一页
  const goModalNextPage = () => {
    if (modalCurrentPage < Math.ceil(systemParameters.length / modalPageSize)) {
      setModalCurrentPage(modalCurrentPage + 1);
    }
  };
  
  // 更新模态框数据
  useEffect(() => {
    if (systemParameters.length > 0) {
      updateModalPageData(systemParameters, modalCurrentPage);
    }
  }, [modalCurrentPage, systemParameters, modalPageSize]);
  
  // 模态框分页样式
  const modalPaginationStyle = {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: '16px',
    borderTop: '1px solid #e8e8e8',
    background: '#fff'
  };

  // 显示手动添加弹窗
  const showManualAddDrawer = async () => {
    setManualAddVisible(true);
    manualAddForm.resetFields();
    // 获取产品分类列表
    await fetchProductCategories();
  };

  // 关闭手动添加弹窗
  const closeManualAddDrawer = () => {
    setManualAddVisible(false);
    manualAddForm.resetFields();
  };

  // 监听参数名称变化
  const handleParamNameChange = (value) => {
    if (value === '产品分类') {
      manualAddForm.setFieldsValue({
        param_unit: '无',
        param_type: '产品分类'
      });
    }
  };

  // 监听参数类型变化
  const handleParamTypeChange = async (value) => {
    if (value === '产品分类') {
      manualAddForm.setFieldsValue({
        param_name: '产品分类',
        param_unit: '无'
      });
      
      // 获取当前产品的分类信息
      if (productId) {
        try {
          const productResponse = await axios.get(`${API_BASE_URL}/api/product_info/${productId}`);
          if (productResponse.data && productResponse.data.code === 200) {
            const productData = productResponse.data.data;
            
            if (productData.category_id) {
              // 获取分类详情
              const categoryResponse = await axios.get(`${API_BASE_URL}/api/product_category/${productData.category_id}`);
              
              if (categoryResponse.data && categoryResponse.data.code === 200) {
                const categoryData = categoryResponse.data.data;
                console.log('当前产品分类:', categoryData);
                
                // 设置参数值为分类ID
                manualAddForm.setFieldsValue({
                  param_value: String(categoryData.id)
                });
              }
            }
          }
        } catch (error) {
          console.error('获取产品分类信息出错:', error);
        }
      }
    }
  };

  // 提交手动添加表单
  const handleManualAddSubmit = async () => {
    try {
      const values = await manualAddForm.validateFields();
      setManualAddLoading(true);
      
      // 获取产品当前版本的ID
      let versionId = null;
      
      try {
        // 获取产品详情
        const productDetailResponse = await axios.get(`${API_BASE_URL}/api/product_info/${productId}`);
        
        if (productDetailResponse.data && productDetailResponse.data.code === 200) {
          const productDetailData = productDetailResponse.data.data;
          const currentVersionNumber = productDetailData.current_version;
          
          if (currentVersionNumber) {
            // 获取产品版本列表
            const versionResponse = await axios.get(`${API_BASE_URL}/api/product_version`, {
              params: {
                page: 1,
                size: 100
              }
            });
            
            if (versionResponse.data && versionResponse.data.code === 200) {
              const versionItems = versionResponse.data.data.items || [];
              const productVersions = versionItems.filter(v => v.product_id === Number(productId));
              
              if (productVersions.length > 0) {
                // 通过版本号匹配
                let currentVersion = productVersions.find(v => v.version === currentVersionNumber);
                
                if (!currentVersion) {
                  // 尝试找到标记为当前版本的记录
                  currentVersion = productVersions.find(v => v.is_current === true);
                  
                  if (!currentVersion) {
                    // 按创建时间排序，最新的在前面
                    productVersions.sort((a, b) => {
                      const dateA = new Date(a.create_time || 0);
                      const dateB = new Date(b.create_time || 0);
                      return dateB - dateA;
                    });
                    currentVersion = productVersions[0];
                  }
                }
                
                if (currentVersion) {
                  versionId = currentVersion.id;
                  console.log('找到当前产品版本ID:', versionId);
                }
              }
            }
          }
        }
      } catch (error) {
        console.error('获取产品版本出错:', error);
      }
      
      if (!versionId) {
        message.error('无法获取产品版本信息，请确认产品已创建版本');
        setManualAddLoading(false);
        return;
      }
      
      // 检查参数是否已存在
      const existingParam = allParameters.find(param => 
        param.param_name === values.param_name && 
        Number(param.version_id) === Number(versionId)
      );
      
      if (existingParam) {
        message.warning(`参数"${values.param_name}"已存在于当前产品版本中，请勿重复添加`);
        setManualAddLoading(false);
        return;
      }
      
      // 构建请求数据
      const requestData = {
        product_id: Number(productId),
        version_id: versionId,
        param_name: values.param_name,
        param_value: values.param_value,
        param_unit: values.param_unit || '无',
        param_type: values.param_type
      };
      
      console.log('创建参数请求数据:', requestData);
      
      // 调用API创建参数
      try {
        const response = await axios.post(`${API_BASE_URL}/api/product_parameter`, requestData);
        
        if (response.data && (response.data.code === 200 || response.data.code === 201)) {
          message.success('添加参数成功');
          closeManualAddDrawer();
          // 重新获取参数列表
          fetchProductParameters();
        } else {
          message.error('添加参数失败: ' + (response.data?.message || '未知错误'));
        }
      } catch (error) {
        console.error('添加参数请求出错:', error);
        
        // 处理常见错误
        if (error.response) {
          const status = error.response.status;
          const errorData = error.response.data;
          
          if (status === 400) {
            if (errorData && errorData.detail) {
              if (typeof errorData.detail === 'string') {
                message.error(`参数验证失败: ${errorData.detail}`);
              } else if (Array.isArray(errorData.detail)) {
                const errorMsg = errorData.detail.map(item => `${item.loc ? item.loc.join('.') : ''}: ${item.msg}`).join('; ');
                message.error(`参数验证失败: ${errorMsg}`);
              } else {
                message.error('参数验证失败，请检查输入');
              }
            } else if (errorData && errorData.message && errorData.message.includes('duplicate')) {
              message.warning(`参数"${values.param_name}"已存在于当前产品版本中，请勿重复添加`);
            } else {
              message.error('添加参数失败: 请求参数有误');
            }
          } else if (status === 409) {
            message.warning(`参数"${values.param_name}"已存在于当前产品版本中，请勿重复添加`);
          } else {
            message.error(`添加参数失败: ${errorData?.message || '服务器错误'}`);
          }
        } else {
          message.error('添加参数失败: ' + (error.message || '网络错误'));
        }
      }
    } catch (error) {
      console.error('表单验证出错:', error);
      message.error('表单验证失败，请检查输入');
    } finally {
      setManualAddLoading(false);
    }
  };

  // 显示编辑参数模态框
  const showEditModal = (record) => {
    setCurrentParameter(record);
    editForm.setFieldsValue({
      param_name: record.param_name,
      param_value: record.param_value,
      param_unit: record.param_unit,
      param_type: record.param_type
    });
    setEditModalVisible(true);
  };

  // 处理编辑参数提交
  const handleEditSubmit = async () => {
    try {
      const values = await editForm.validateFields();
      setEditLoading(true);

      try {
        const response = await axios.put(`${API_BASE_URL}/api/product_parameter/${currentParameter.id}`, {
          param_name: values.param_name,
          param_value: values.param_value,
          param_unit: values.param_unit,
          param_type: values.param_type
        });

        if (response.data && response.data.code === 200) {
          message.success('参数更新成功');
          setEditModalVisible(false);
          fetchProductParameters(); // 重新加载数据
        } else {
          message.error('更新参数失败: ' + (response.data.message || '未知错误'));
        }
      } catch (error) {
        console.error('更新参数请求错误:', error);
        message.error('更新参数失败: ' + (error.message || '网络错误'));
      } finally {
        setEditLoading(false);
      }
    } catch (errorInfo) {
      console.log('表单验证失败:', errorInfo);
    }
  };

  // 处理取消编辑
  const handleEditCancel = () => {
    setEditModalVisible(false);
    setCurrentParameter(null);
  };

  // 处理删除参数
  const handleDeleteParameter = async (id) => {
    setLoading(true);
    try {
      const response = await axios.delete(`${API_BASE_URL}/api/product_parameter/${id}`);
      
      if (response.data && response.data.code === 200) {
        message.success('参数删除成功');
        fetchProductParameters(); // 重新加载数据
      } else {
        message.error('删除参数失败: ' + (response.data.message || '未知错误'));
      }
    } catch (error) {
      console.error('删除参数错误:', error);
      message.error('删除参数失败: ' + (error.message || '网络错误'));
    } finally {
      setLoading(false);
    }
  };

  return (
    <Spin spinning={loading}>
      <style dangerouslySetInnerHTML={{ __html: productParameterStyles }} />
      <div className="parameter-list-container">
        <div className="table-header-actions">
          <div>
            <h3 style={{ margin: 0 }}>产品参数列表</h3>
          </div>
          <div className="action-buttons">
            <Button 
              type="primary" 
              icon={<PlusOutlined />} 
              onClick={showManualAddDrawer}
            >
              手动添加
            </Button>
            <Button 
              type="primary" 
              icon={<UploadOutlined />} 
              onClick={showAddParameterModal}
            >
              批量添加
            </Button>
          </div>
          </div>
          
        <div style={{ flex: 1, overflow: 'auto' }}>
          <Table
            className={`data-table ${parameterList.length >= 10 || isMobile ? 'compact-table' : ''}`}
            dataSource={parameterList}
            columns={getColumns()}
            rowKey="id"
            pagination={false}
            rowClassName={getRowClassName}
            size={isMobile || parameterList.length >= 10 ? 'small' : 'middle'}
            bordered={true}
            scroll={{ x: isMobile ? 800 : 'max-content' }}
            tableLayout="auto"
            locale={{ emptyText: '暂无数据' }}
          />
        </div>
        
        {/* 自定义分页，参考FeatureMapping.jsx的样式 */}
        <div className="pagination-container">
          <div style={{ display: 'flex', alignItems: 'center' }}>
            <span>共 {pagination.total} 条，{Math.ceil(pagination.total / pageSize)} 页</span>
          </div>
          
          <div style={{ display: 'flex', alignItems: 'center' }}>
            <Button 
              icon={<LeftOutlined />}
              onClick={goPrevPage}
              disabled={currentPage === 1}
              style={{ marginRight: '8px' }}
            />
            
            <Input
              ref={inputRef}
              style={{ width: '50px', textAlign: 'center', margin: '0 8px' }}
              value={currentPage}
              onChange={handlePageInputChange}
              onKeyPress={handlePageInputKeyPress}
            />
            
            <span style={{ margin: '0 8px' }}>/ {Math.ceil(pagination.total / pageSize)}</span>
            
            <Button 
              icon={<RightOutlined />}
              onClick={goNextPage}
              disabled={currentPage >= Math.ceil(pagination.total / pageSize)}
              style={{ marginLeft: '8px', marginRight: '8px' }}
            />
            
            <span style={{ marginLeft: '8px' }}>
              10 / 页
            </span>
          </div>
        </div>
      </div>

      {/* 手动添加参数弹窗 */}
      <Modal
        title="手动添加产品参数"
        width={500}
        open={manualAddVisible}
        onCancel={closeManualAddDrawer}
        footer={[
          <Button key="cancel" onClick={closeManualAddDrawer}>
            取消
          </Button>,
          <Button 
            key="submit" 
            type="primary" 
            loading={manualAddLoading} 
            onClick={handleManualAddSubmit}
          >
            确认添加
          </Button>
        ]}
      >
        <Form
          form={manualAddForm}
          layout="vertical"
          initialValues={{
            param_unit: '',
            param_type: '字符串'
          }}
        >
          <Form.Item
            name="param_name"
            label="参数名称"
            rules={[{ required: true, message: '请输入参数名称' }]}
          >
            <Input placeholder="请输入参数名称" onChange={(e) => handleParamNameChange(e.target.value)} />
          </Form.Item>
          
          <Form.Item
            name="param_value"
            label="参数值"
            rules={[{ required: true, message: '请输入参数值' }]}
          >
            {manualAddForm.getFieldValue('param_name') === '产品分类' ? (
              <Select placeholder="请选择产品分类">
                {productCategories.map(category => (
                  <Select.Option key={category.id} value={String(category.id)}>
                    {category.name}
                  </Select.Option>
                ))}
              </Select>
            ) : (
              <Input placeholder="请输入参数值" />
            )}
          </Form.Item>
          
          <Form.Item
            name="param_unit"
            label="参数单位"
          >
            <Input placeholder="请输入参数单位" />
          </Form.Item>
          
          <Form.Item
            name="param_type"
            label="参数类型"
          >
            <Select onChange={handleParamTypeChange}>
              <Select.Option value="字符串">字符串</Select.Option>
              <Select.Option value="数值">数值</Select.Option>
              <Select.Option value="物理尺寸">物理尺寸</Select.Option>
              <Select.Option value="电性能">电性能</Select.Option>
              <Select.Option value="环境参数">环境参数</Select.Option>
              <Select.Option value="性能指标">性能指标</Select.Option>
              <Select.Option value="产品分类">产品分类</Select.Option>
            </Select>
          </Form.Item>
        </Form>
      </Modal>

      {/* 添加参数模态框 */}
      <Modal
        title="添加产品参数"
        open={isModalVisible}
        onOk={handleAddParameters}
        onCancel={handleModalCancel}
        width={800}
        confirmLoading={parameterModalLoading}
        okText="确认添加"
        cancelText="取消"
      >
        <Spin spinning={parameterModalLoading}>
          <Table
            dataSource={modalParameters}
            columns={getParameterModalColumns()}
            rowKey="id"
            pagination={false}
            scroll={{ y: 400 }}
            size="small"
            locale={{ emptyText: '暂无可添加的参数' }}
          />
          
          {/* 模态框自定义分页 */}
          <div style={modalPaginationStyle}>
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <span>共 {systemParameters.length} 条</span>
            </div>
            
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <Button 
                icon={<LeftOutlined />}
                onClick={goModalPrevPage}
                disabled={modalCurrentPage === 1}
                style={{ marginRight: '8px' }}
              />
              
              <Input
                ref={modalInputRef}
                style={{ width: '50px', textAlign: 'center', margin: '0 8px' }}
                value={modalCurrentPage}
                onChange={handleModalPageInputChange}
                onKeyPress={handleModalPageInputKeyPress}
              />
              
              <Button 
                icon={<RightOutlined />}
                onClick={goModalNextPage}
                disabled={modalCurrentPage >= Math.ceil(systemParameters.length / modalPageSize)}
                style={{ marginLeft: '8px', marginRight: '8px' }}
              />
              
              <span style={{ marginLeft: '8px' }}>
                {modalPageSize} / page
              </span>
            </div>
          </div>
        </Spin>
      </Modal>

      {/* 编辑参数模态框 */}
      <Modal
        title="编辑产品参数"
        open={editModalVisible}
        onOk={handleEditSubmit}
        onCancel={handleEditCancel}
        confirmLoading={editLoading}
        okText="确认"
        cancelText="取消"
      >
        <Form
          form={editForm}
          layout="vertical"
        >
          <Form.Item
            name="param_name"
            label="参数名称"
            rules={[{ required: true, message: '请输入参数名称' }]}
          >
            <Input placeholder="请输入参数名称" />
          </Form.Item>
          
          <Form.Item
            name="param_value"
            label="参数值"
            rules={[{ required: true, message: '请输入参数值' }]}
          >
            <Input placeholder="请输入参数值" />
          </Form.Item>
          
          <Form.Item
            name="param_unit"
            label="参数单位"
          >
            <Input placeholder="请输入参数单位" />
          </Form.Item>
          
          <Form.Item
            name="param_type"
            label="参数类型"
          >
            <Select>
              <Select.Option value="字符串">字符串</Select.Option>
              <Select.Option value="数值">数值</Select.Option>
              <Select.Option value="物理尺寸">物理尺寸</Select.Option>
              <Select.Option value="电性能">电性能</Select.Option>
              <Select.Option value="环境参数">环境参数</Select.Option>
              <Select.Option value="性能指标">性能指标</Select.Option>
              <Select.Option value="产品分类">产品分类</Select.Option>
            </Select>
          </Form.Item>
        </Form>
      </Modal>
    </Spin>
  );
};

export default ProductParameter; 